<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Asteroids Game</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
        }
        canvas {
            display: block;
            background: radial-gradient(ellipse at center, #0a0a2a 0%, #000 100%);
        }
        .game-ui {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-family: 'Courier New', monospace;
            font-size: 20px;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        .game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-family: 'Courier New', monospace;
            text-align: center;
            display: none;
        }
        .game-over h1 {
            font-size: 48px;
            margin-bottom: 20px;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
        }
        .game-over button {
            padding: 10px 30px;
            font-size: 20px;
            background: transparent;
            border: 2px solid white;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        .game-over button:hover {
            background: white;
            color: black;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <div class="game-ui">
        <div>Score: <span id="score">0</span></div>
        <div>Lives: <span id="lives">3</span></div>
        <div>Level: <span id="level">1</span></div>
    </div>
    <div class="game-over" id="gameOver">
        <h1>GAME OVER</h1>
        <p>Final Score: <span id="finalScore">0</span></p>
        <button onclick="resetGame()">Play Again</button>
    </div>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        // Game state
        let score = 0;
        let lives = 3;
        let level = 1;
        let gameActive = true;
        // Ship properties
        const ship = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: -Math.PI / 2,
            velX: 0,
            velY: 0,
            radius: 10,
            thrust: false,
            invulnerable: 0,
            respawnTimer: 0
        };
        // Game objects arrays
        let bullets = [];
        let asteroids = [];
        let particles = [];
        let ufos = [];
        let stars = [];
        // Controls
        const keys = {
            left: false,
            right: false,
            up: false,
            space: false
        };
        // Initialize stars background
        for (let i = 0; i < 100; i++) {
            stars.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                size: Math.random() * 2,
                brightness: Math.random()
            });
        }
        // Particle class
        class Particle {
            constructor(x, y, color = 'white') {
                this.x = x;
                this.y = y;
                this.velX = (Math.random() - 0.5) * 8;
                this.velY = (Math.random() - 0.5) * 8;
                this.life = 1;
                this.color = color;
                this.size = Math.random() * 3 + 1;
            }
            update() {
                this.x += this.velX;
                this.y += this.velY;
                this.velX *= 0.98;
                this.velY *= 0.98;
                this.life -= 0.02;
                this.size *= 0.98;
            }
            draw() {
                ctx.save();
                ctx.globalAlpha = this.life;
                ctx.fillStyle = this.color;
                ctx.shadowBlur = 10;
                ctx.shadowColor = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }
        // UFO class
        class UFO {
            constructor() {
                this.x = Math.random() < 0.5 ? 0 : canvas.width;
                this.y = Math.random() * canvas.height;
                this.velX = (Math.random() < 0.5 ? 1 : -1) * (1 + level * 0.2);
                this.velY = (Math.random() - 0.5) * 2;
                this.radius = 20;
                this.shootTimer = 0;
                this.points = 200;
            }
            update() {
                this.x += this.velX;
                this.y += this.velY;
                this.shootTimer++;
                // Shoot at player
                if (this.shootTimer > 60 && Math.random() < 0.02) {
                    const angle = Math.atan2(ship.y - this.y, ship.x - this.x);
                    bullets.push({
                        x: this.x,
                        y: this.y,
                        velX: Math.cos(angle) * 5,
                        velY: Math.sin(angle) * 5,
                        life: 60,
                        isEnemy: true
                    });
                    this.shootTimer = 0;
                }
                // Wrap around screen
                if (this.x < -this.radius) this.x = canvas.width + this.radius;
                if (this.x > canvas.width + this.radius) this.x = -this.radius;
                if (this.y < -this.radius) this.y = canvas.height + this.radius;
                if (this.y > canvas.height + this.radius) this.y = -this.radius;
            }
            draw() {
                ctx.strokeStyle = '#ff00ff';
                ctx.lineWidth = 2;
                ctx.shadowBlur = 15;
                ctx.shadowColor = '#ff00ff';
                
                // UFO body
                ctx.beginPath();
                ctx.ellipse(this.x, this.y, this.radius, this.radius * 0.4, 0, 0, Math.PI * 2);
                ctx.stroke();
                
                // UFO dome
                ctx.beginPath();
                ctx.arc(this.x, this.y - 5, this.radius * 0.5, Math.PI, 0);
                ctx.stroke();
                
                ctx.shadowBlur = 0;
            }
        }
        // Asteroid class
        class Asteroid {
            constructor(x, y, radius, level = 1) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.level = level;
                this.velX = (Math.random() - 0.5) * 4;
                this.velY = (Math.random() - 0.5) * 4;
                this.angle = Math.random() * Math.PI * 2;
                this.rotationSpeed = (Math.random() - 0.5) * 0.1;
                this.vertices = this.generateVertices();
                this.points = level === 3 ? 20 : level === 2 ? 50 : 100;
            }
            generateVertices() {
                const vertices = [];
                const numVertices = 8 + Math.floor(Math.random() * 4);
                for (let i = 0; i < numVertices; i++) {
                    const angle = (i / numVertices) * Math.PI * 2;
                    const variance = 0.8 + Math.random() * 0.4;
                    vertices.push({
                        x: Math.cos(angle) * this.radius * variance,
                        y: Math.sin(angle) * this.radius * variance
                    });
                }
                return vertices;
            }
            update() {
                this.x += this.velX;
                this.y += this.velY;
                this.angle += this.rotationSpeed;
                // Wrap around screen
                if (this.x < -this.radius) this.x = canvas.width + this.radius;
                if (this.x > canvas.width + this.radius) this.x = -this.radius;
                if (this.y < -this.radius) this.y = canvas.height + this.radius;
                if (this.y > canvas.height + this.radius) this.y = -this.radius;
            }
            draw() {
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.rotate(this.angle);
                ctx.strokeStyle = 'white';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(this.vertices[0].x, this.vertices[0].y);
                for (let i = 1; i < this.vertices.length; i++) {
                    ctx.lineTo(this.vertices[i].x, this.vertices[i].y);
                }
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
            split() {
                if (this.level > 1) {
                    const newLevel = this.level - 1;
                    const newRadius = this.radius * 0.6;
                    for (let i = 0; i < 2; i++) {
                        const asteroid = new Asteroid(this.x, this.y, newRadius, newLevel);
                        asteroid.velX = (Math.random() - 0.5) * 6;
                        asteroid.velY = (Math.random() - 0.5) * 6;
                        asteroids.push(asteroid);
                    }
                }
            }
        }
        // Initialize asteroids for level
        function createAsteroids(count) {
            asteroids = [];
            for (let i = 0; i < count; i++) {
                let x, y;
                do {
                    x = Math.random() * canvas.width;
                    y = Math.random() * canvas.height;
                } while (Math.hypot(x - ship.x, y - ship.y) < 150);
                
                asteroids.push(new Asteroid(x, y, 40, 3));
            }
        }
        // Input handlers
        window.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowLeft':
                    keys.left = true;
                    break;
                case 'ArrowRight':
                    keys.right = true;
                    break;
                case 'ArrowUp':
                    keys.up = true;
                    break;
                case ' ':
                    if (!keys.space && ship.respawnTimer === 0) {
                        shoot();
                    }
                    keys.space = true;
                    e.preventDefault();
                    break;
            }
        });
        window.addEventListener('keyup', (e) => {
            switch(e.key) {
                case 'ArrowLeft':
                    keys.left = false;
                    break;
                case 'ArrowRight':
                    keys.right = false;
                    break;
                case 'ArrowUp':
                    keys.up = false;
                    ship.thrust = false;
                    break;
                case ' ':
                    keys.space = false;
                    break;
            }
        });
        function shoot() {
            bullets.push({
                x: ship.x + Math.cos(ship.angle) * ship.radius,
                y: ship.y + Math.sin(ship.angle) * ship.radius,
                velX: Math.cos(ship.angle) * 10,
                velY: Math.sin(ship.angle) * 10,
                life: 40,
                isEnemy: false
            });
        }
        function updateShip() {
            if (ship.respawnTimer > 0) {
                ship.respawnTimer--;
                if (ship.respawnTimer === 0) {
                    ship.x = canvas.width / 2;
                    ship.y = canvas.height / 2;
                    ship.velX = 0;
                    ship.velY = 0;
                    ship.angle = -Math.PI / 2;
                    ship.invulnerable = 120;
                }
                return;
            }
            // Rotation
            if (keys.left) {
                ship.angle -= 0.1;
            }
            if (keys.right) {
                ship.angle += 0.1;
            }
            // Thrust
            if (keys.up) {
                ship.thrust = true;
                ship.velX += Math.cos(ship.angle) * 0.3;
                ship.velY += Math.sin(ship.angle) * 0.3;
                
                // Thrust particles
                if (Math.random() < 0.8) {
                    particles.push(new Particle(
                        ship.x - Math.cos(ship.angle) * ship.radius,
                        ship.y - Math.sin(ship.angle) * ship.radius,
                        '#ffaa00'
                    ));
                }
            } else {
                ship.thrust = false;
            }
            // Apply friction
            ship.velX *= 0.99;
            ship.velY *= 0.99;
            // Update position
            ship.x += ship.velX;
            ship.y += ship.velY;
            // Wrap around screen
            if (ship.x < 0) ship.x = canvas.width;
            if (ship.x > canvas.width) ship.x = 0;
            if (ship.y < 0) ship.y = canvas.height;
            if (ship.y > canvas.height) ship.y = 0;
            // Update invulnerability
            if (ship.invulnerable > 0) {
                ship.invulnerable--;
            }
        }
        function drawShip() {
            if (ship.respawnTimer > 0) return;
            
            ctx.save();
            ctx.translate(ship.x, ship.y);
            ctx.rotate(ship.angle);
            
            // Blink when invulnerable
            if (ship.invulnerable > 0 && Math.floor(ship.invulnerable / 5) % 2 === 0) {
                ctx.globalAlpha = 0.3;
            }
            
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 2;
            ctx.shadowBlur = 10;
            ctx.shadowColor = 'cyan';
            
            // Draw ship
            ctx.beginPath();
            ctx.moveTo(ship.radius, 0);
            ctx.lineTo(-ship.radius, -ship.radius * 0.7);
            ctx.lineTo(-ship.radius * 0.5, 0);
            ctx.lineTo(-ship.radius, ship.radius * 0.7);
            ctx.closePath();
            ctx.stroke();
            
            // Draw thrust
            if (ship.thrust && Math.random() > 0.3) {
                ctx.strokeStyle = '#ffaa00';
                ctx.shadowColor = '#ff6600';
                ctx.beginPath();
                ctx.moveTo(-ship.radius * 0.5, -ship.radius * 0.3);
                ctx.lineTo(-ship.radius * 1.5, 0);
                ctx.lineTo(-ship.radius * 0.5, ship.radius * 0.3);
                ctx.stroke();
            }
            
            ctx.restore();
        }
        function updateBullets() {
            bullets = bullets.filter(bullet => {
                bullet.x += bullet.velX;
                bullet.y += bullet.velY;
                bullet.life--;
                // Wrap around screen
                if (bullet.x < 0) bullet.x = canvas.width;
                if (bullet.x > canvas.width) bullet.x = 0;
                if (bullet.y < 0) bullet.y = canvas.height;
                if (bullet.y > canvas.height) bullet.y = 0;
                return bullet.life > 0;
            });
        }
        function drawBullets() {
            bullets.forEach(bullet => {
                ctx.fillStyle = bullet.isEnemy ? '#ff00ff' : '#00ffff';
                ctx.shadowBlur = 10;
                ctx.shadowColor = bullet.isEnemy ? '#ff00ff' : '#00ffff';
                ctx.beginPath();
                ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);
                ctx.fill();
            });
            ctx.shadowBlur = 0;
        }
        function checkCollisions() {
            // Bullets vs Asteroids
            bullets.forEach((bullet, bulletIndex) => {
                if (bullet.isEnemy) return;
                
                asteroids.forEach((asteroid, asteroidIndex) => {
                    if (Math.hypot(bullet.x - asteroid.x, bullet.y - asteroid.y) < asteroid.radius) {
                        // Create explosion particles
                        for (let i = 0; i < 10; i++) {
                            particles.push(new Particle(asteroid.x, asteroid.y));
                        }
                        
                        // Split asteroid
                        asteroid.split();
                        
                        // Update score
                        score += asteroid.points;
                        updateUI();
                        
                        // Remove asteroid and bullet
                        asteroids.splice(asteroidIndex, 1);
                        bullets.splice(bulletIndex, 1);
                    }
                });
            });
            // Bullets vs UFOs
            bullets.forEach((bullet, bulletIndex) => {
                if (bullet.isEnemy) return;
                
                ufos.forEach((ufo, ufoIndex) => {
                    if (Math.hypot(bullet.x - ufo.x, bullet.y - ufo.y) < ufo.radius) {
                        // Create explosion
                        for (let i = 0; i < 15; i++) {
                            particles.push(new Particle(ufo.x, ufo.y, '#ff00ff'));
                        }
                        
                        score += ufo.points;
                        updateUI();
                        
                        ufos.splice(ufoIndex, 1);
                        bullets.splice(bulletIndex, 1);
                    }
                });
            });
            // Ship vs Asteroids/UFOs/Enemy bullets
            if (ship.invulnerable === 0 && ship.respawnTimer === 0) {
                // Check asteroid collisions
                asteroids.forEach(asteroid => {
                    if (Math.hypot(ship.x - asteroid.x, ship.y - asteroid.y) < ship.radius + asteroid.radius) {
                        shipHit();
                    }
                });
                // Check UFO collisions
                ufos.forEach(ufo => {
                    if (Math.hypot(ship.x - ufo.x, ship.y - ufo.y) < ship.radius + ufo.radius) {
                        shipHit();
                    }
                });
                // Check enemy bullet collisions
                bullets.forEach(bullet => {
                    if (bullet.isEnemy && Math.hypot(ship.x - bullet.x, ship.y - bullet.y) < ship.radius) {
                        shipHit();
                    }
                });
            }
        }
        function shipHit() {
            // Create explosion
            for (let i = 0; i < 20; i++) {
                particles.push(new Particle(ship.x, ship.y, '#00ffff'));
            }
            
            lives--;
            updateUI();
            
            if (lives <= 0) {
                gameOver();
            } else {
                ship.respawnTimer = 60;
            }
        }
        function updateParticles() {
            particles = particles.filter(particle => {
                particle.update();
                return particle.life > 0;
            });
        }
        function drawParticles() {
            particles.forEach(particle => particle.draw());
        }
        function drawStars() {
            ctx.fillStyle = 'white';
            stars.forEach(star => {
                ctx.globalAlpha = star.brightness;
                ctx.beginPath();
                ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
                ctx.fill();
            });
            ctx.globalAlpha = 1;
        }
        function nextLevel() {
            level++;
            createAsteroids(3 + level);
            ship.invulnerable = 120;
            updateUI();
        }
        function updateUI() {
            document.getElementById('score').textContent = score;
            document.getElementById('lives').textContent = lives;
            document.getElementById('level').textContent = level;
        }
        function gameOver() {
            gameActive = false;
            document.getElementById('finalScore').textContent = score;
            document.getElementById('gameOver').style.display = 'block';
        }
        function resetGame() {
            score = 0;
            lives = 3;
            level = 1;
            gameActive = true;
            ship.x = canvas.width / 2;
            ship.y = canvas.height / 2;
            ship.velX = 0;
            ship.velY = 0;
            ship.angle = -Math.PI / 2;
            ship.invulnerable = 120;
            ship.respawnTimer = 0;
            bullets = [];
            particles = [];
            ufos = [];
            createAsteroids(4);
            document.getElementById('gameOver').style.display = 'none';
            updateUI();
        }
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            drawStars();
            
            if (gameActive) {
                updateShip();
                updateBullets();
                updateParticles();
                
                // Update asteroids
                asteroids.forEach(asteroid => asteroid.update());
                
                // Update UFOs
                ufos.forEach(ufo => ufo.update());
                
                // Spawn UFOs occasionally
                if (Math.random() < 0.001 * level && ufos.length < 2) {
                    ufos.push(new UFO());
                }
                
                checkCollisions();
                
                // Check for level complete
                if (asteroids.length === 0) {
                    nextLevel();
                }
            }
            
            // Draw everything
            asteroids.forEach(asteroid => asteroid.draw());
            ufos.forEach(ufo => ufo.draw());
            drawBullets();
            drawParticles();
            drawShip();
            
            requestAnimationFrame(gameLoop);
        }
        // Handle window resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
        // Start game
        createAsteroids(4);
        updateUI();
        gameLoop();
    </script>
</body>
</html>